<template>
  <a-skeleton :loading="loading" active :title="false" :paragraph="{ rows: 6, width: '100%' }">
    <a-card hoverable :bordered="false" size="small">
      <a-table
        rowKey="id"
        size="small"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        :onExpand="handldOnExpand"
        :indentSize="40"
        :scroll="{ x: 800 }"
        :key="new Date().getTime()"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'operation'">
            <div style="display: flex; justify-content: space-between; align-items: center">
              <span> 操作 </span>
              <a-button
                type="primary"
                size="middle"
                @click="addMenu"
                v-auth="['admin', 'menu:add']"
              >
                新增
              </a-button>
            </div>
          </template>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'iFrame'">
            <span v-if="record.iFrame">是</span>
            <span v-else>否</span>
          </template>
          <template v-if="column.key === 'hidden'">
            <span v-if="record.hidden">否</span>
            <span v-else>是</span>
          </template>

          <template v-if="column.key === 'operation'">
            <span>
              <a-button
                type="link"
                size="middle"
                @click="editMenu(record)"
                v-auth="['admin', 'menu:edit']"
                >编辑</a-button
              >
              <a-divider type="vertical" />
              <a-popconfirm
                v-if="dataSource.length"
                title="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
                @confirm="onDelete(record.id)"
              >
                <a-button type="link" size="middle" v-auth="['admin', 'menu:del']">删除</a-button>
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>

      <MenuModal ref="menuModalRef" />
    </a-card>
  </a-skeleton>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted, watch } from 'vue';
  import { notification } from 'ant-design-vue';
  import { reload, hasChildren } from './index';
  import { getMenusApi, delMenuApi } from '/@/api/menu';
  import MenuModal from './menuModal.vue';

  const columns = [
    {
      title: '菜单标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '图标',
      dataIndex: 'icon',
      key: 'icon',
    },
    {
      title: '排序',
      dataIndex: 'menuSort',
      key: 'menuSort',
    },
    {
      title: '权限标识',
      dataIndex: 'permission',
      key: 'permission',
    },

    {
      title: '组件路径',
      dataIndex: 'component',
      key: 'component',
    },
    {
      title: '外链',
      dataIndex: 'iFrame',
      key: 'iFrame',
    },
    {
      title: '可见',
      dataIndex: 'hidden',
      key: 'hidden',
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ];

  export default defineComponent({
    components: {
      MenuModal,
    },
    setup() {
      const loading = ref<boolean>(true);
      const dataSource = ref<any>([]);
      const loadMenus = async () => {
        try {
          let res = await getMenusApi({
            page: 0,
            size: 20,
            sort: 'id,desc',
          });
          dataSource.value = hasChildren(res?.content || []);
        } catch (error) {}
      };

      watch([reload], () => {
        loadMenus();
      });

      onMounted(() => {
        setTimeout(async () => {
          loading.value = false;
        }, 300);
        loadMenus();
      });

      const handldOnExpand = async (expanded, record) => {
        if (!expanded) return; //如果是关闭就返回
        if (record.children && record.children.length > 0) return; //如果已经有数据就返回
        const id = record.id;
        const data = dataSource.value;
        let response = await getMenusApi({
          pid: id,
        });
        //获取到的子节点
        const children = hasChildren(response?.content ?? []);
        const dataMap = (items: Array<any>) => {
          items.find((item) => {
            if (item.id === id) {
              //找到当前要展开的节点
              item.children = children;
              return items;
            }
            if (item.children && item.children.length > 0) {
              dataMap(item.children);
            }
          });
        };
        dataMap(data || []);
        dataSource.value = data;
      };

      const menuModalRef = ref();
      const addMenu = () => {
        menuModalRef.value.open(true, {});
      };
      const editMenu = (record) => {
        menuModalRef.value.open(false, { ...record });
      };

      const onDelete = async (id) => {
        try {
          await delMenuApi([id]);
          reload.value = !reload.value;
          notification['success']({
            message: '删除成功!',
            duration: 3,
          });
        } catch (error) {}
      };

      return {
        loading,
        handldOnExpand,
        dataSource,
        columns,
        menuModalRef,
        addMenu,
        editMenu,
        onDelete,
      };
    },
  });
</script>
<style lang="less" scoped></style>
